<template>
    <div class="container yuan-container userpoints-list">

        <a-card title="用户积分">
            <div class="filter-panel">
                <div class="filter-list">
                    <span>用户名称：</span>
                    <a-input-search allowClear v-model="pageParams.userName" placeholder="用户名称" @search="resetList" />
                </div>

            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id+'_'+i" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button type="primary" @click="clickDetail(record)">积分明细</a-button>

                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :editInfo="editInfo" @resetList="resetList"
            v-if="detailVisible" />
    </div>
</template>
<script lang="ts">
import platformApi from "@/api/platformApi";
import { toDecimalNoZero } from "@/utils";
import { Component, Vue } from "vue-property-decorator";
import DetailVue from "./userPointDetail.vue";
@Component({
    name: "tpl",
    components: { DetailVue },
})
export default class extends Vue {
    loading = false;
    pageList = [{ name: "测试商品" }];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    pageParams: any = {
        userName: "",
    };
    columns = [
        {
            align: "center",
            dataIndex: "userName",
            key: "userName",
            title: "用户名称",
        },
        // {
        //     align: "center",
        //     dataIndex: "isInvited",
        //     key: "isInvited",
        //     title: "是否被邀请",
        //     customRender: (text: string, record: any, index: number) => {
        //         if (record.isInvited === 0) {
        //             return "否";
        //         } else {
        //             return "是";
        //         }
        //     },
        // },
        {
            align: "center",
            dataIndex: "totalPoints",
            key: "totalPoints",
            title: "累计获得积分",
        },
        {
            align: "center",
            dataIndex: "currentPoints",
            key: "currentPoints",
            title: "当前积分",
        },
        {
            align: "center",
            dataIndex: "usePoints",
            key: "usePoints",
            title: "已使用积分",
            customRender: (text: string, record: any, index: number) => {
                return  toDecimalNoZero(record.totalPoints-record.currentPoints)
            },
        },

        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 150,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await platformApi.getUserIntegralList({
                ...this.pageParams,
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
            });
            this.pageList = res.data?.rows || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    mounted() {
        this.getList();
    }
    detailVisible = false;
    editInfo = {};
    clickDetail(item) {
        this.editInfo = item;
        this.detailVisible = true;
    }
}
</script>
<style scoped lang="scss">
.userpoints-list {
}
</style>
